<style lang="scss" scoped>
* {
  font-family: HONOR Sans CN, HONOR Sans CN;
}
.details-dialog {
  ::v-deep(.el-dialog__header) {
    padding: 0;
  }

  ::v-deep(.el-dialog__body) {
    padding: 40px;
  }
}

.body {
  .header {
    margin-bottom: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__title {
      font-size: 18px;
      color: #303133;
      font-weight: 700;
    }

    &__close {
      font-size: 24px;
    }
  }

  .details {
    .form__label {
      color: #303133;
      font-size: 14px;
      font-weight: 500;
    }
  }
}

</style>

<script>
import dayjs from 'dayjs'
import PatrolPlanForm from './patrolPlanForm/index.vue'
import PointsForm from '@/views/watchman/components/pointsForm.vue'
import { patrolPlan } from '@/api/watchman'

export default {
  components: {
    PatrolPlanForm,
    PointsForm
  },
  props: {
    patrolId: {
      type: [Number, null],
      requried: true,
      default: null
    },
    value: {
      type: Boolean,
      required: true,
      default: false
    },
    title: {
      type: String,
      required: false,
      default: '查看巡防班次'
    },
    confirmText: {
      type: String,
      required: false,
      default: '确定'
    }
  },
  data() {
    return {
      id: null,
      dialog: {},
      form: {
        form: {
          name: '',
          beginTime: null,
          endTime: null,
          number: 1
        },
        plans: []
      },
      loadingStatuses: { loading: false },
      pointOptions: {
        visible: false,
        points: []
      }
    }
  },
  computed: {
    dialogVisible: {
      get: function() { return this.value },
      set: function(visible) { return this.$emit('input', visible) }
    },
    patrolPlansSorted() {
      return this.form.plans.concat().sort((range1, range2) => {
        return range1.beginTime.getTime() - range2.endTime.getTime()
      })
    },
    isShow() {
      return this.dialogVisible && typeof this.patrolId === 'number'
    },
    isActionDisabled() {
      return this.loadingStatuses.loading
    }
  },
  watch: {
    isShow(isShow) {
      if (!isShow) return

      this.initData()
    }
  },
  methods: {
    async getPatrolPlan() {
      const result = await patrolPlan(this.patrolId)

      const {
        data: {
          name,
          time: times
        }
      } = result

      this.form.form.name = name
      this.form.plans = times.map(timeRange => {
        const currentDate = dayjs()
        const { start_time, end_time, drop } = timeRange
        return {
          timeRange: [
            dayjs(`${currentDate.format('YYYY-MM-DD')} ${start_time}`).toDate(),
            dayjs(`${currentDate.format('YYYY-MM-DD')} ${end_time}`).toDate()
          ],
          beginTime: dayjs(`${currentDate.format('YYYY-MM-DD')} ${start_time}`).toDate(),
          endTime: dayjs(`${currentDate.format('YYYY-MM-DD')} ${end_time}`).toDate(),
          points: drop.map(item => {
            return {
              name: item.name,
              QRCode: item.qrcode
            }
          })
        }
      })
    },
    async loadData() {
      const result = await Promise.allSettled([
        this.getPatrolPlan()
      ])

      const failTask = result.filter(task => task.status === 'rejected')
      if (failTask.length <= 0) return

      throw failTask.at(0).reason
    },
    async initData() {
      try {
        this.loadingStatuses.loading = true
        await this.sleep(500)
        await this.loadData()
        this.loadingStatuses.loading = false
      } catch (e) {
        this.loadingStatuses.loading = false
        this.$message.error('获取失败')
      }
    },
    closeDialog() {
      if (this.loadingStatuses.loading) { return }

      this.dialogVisible = false
    },
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },

    handleOpenPointsDialog(index) {
      const timeRange = this.form.plans.at(index)
      if (!timeRange) return
      console.log('timeRange --------->', timeRange)
      this.pointOptions.points = timeRange.points
      this.pointOptions.visible = true
    }
  }
}

</script>

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="closeDialog"
      destroy-on-close
      :show-close="false"
      width="615px"
      class="details-dialog"
    >
      <div v-loading="isActionDisabled" class="body">
        <div class="header">
          <div class="header__title">{{ title }}</div>
          <i class="el-icon-close header__close" @click="closeDialog" />
        </div>
        <div class="details">
          <el-form v-model="form.form" label-width="auto">
            <el-form-item>
              <template #label>
                <span class="form__label">班次简称</span>
              </template>
              <el-input
                v-model="form.form.name"
                placeholder="请输入班次简称"
                size="small"
                disabled
                style="width: 454px;"
              />
            </el-form-item>

            <el-form-item
              v-for="(item, index) in form.plans"
              :key="index"
            >
              <template #label>
                <span class="form__label">{{ `第${index + 1}个班次` }}</span>
              </template>
              <div style="display: flex;">
                <el-time-picker
                  v-model="item.timeRange"
                  size="small"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  disabled
                  style="width: 328px;"
                />
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-view"
                  size="small"
                  style="margin-left: 20px; width: 106px;"
                  @click="handleOpenPointsDialog(index)"
                >
                  {{ item.points.length }}个点位
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <!--      <PatrolPlanForm-->
        <!--        ref="patrolPlanForm"-->
        <!--        v-model="form"-->
        <!--        disabled-->
        <!--        :is-delete-btn-visible="false"-->
        <!--        :is-form-visible="false"-->
        <!--      />-->
      </div>

      <!--    <div slot="footer">-->
      <!--      <el-button-->
      <!--        type="primary"-->
      <!--        :disabled="isActionDisabled"-->
      <!--        @click="closeDialog"-->
      <!--      >-->
      <!--        {{ confirmText }}-->
      <!--      </el-button>-->
      <!--    </div>-->

    </el-dialog>
    <PointsForm
      v-model="pointOptions.visible"
      :data="pointOptions.points"
      disabled
    />
  </div>

</template>
